<template>
  <view class="vm-page vh">
    <view class="dev-detail">
      <!-- 设备信息 -->
      <view class="dev-info">
        <nut-row>
          <nut-col :span="20">
            <view class="dev-name">{{ dev.name ? dev.name : "未知设备" }}</view>
            <view class="dev-id">{{ dev.deviceId || "" }}</view>
            <view class="dev-signal"
              >信号：{{ dev.RSSI ? dev.RSSI : "---" }}</view
            >
          </nut-col>
          <nut-col :span="4">
            <view class="dev-connect">
              {{ connectStatusText }}
            </view>
          </nut-col>
        </nut-row>
      </view>
      <!-- 设备服务 -->
      <view class="dev-data">
        <view class="dev-data-title">广播数据</view>
        <view class="dev-data-content">
          {{ dev.advertisData ? dev.advertisData : "无数据" }}
        </view>

        <view class="dev-data-title">服务列表</view>
        <view class="dev-data-services">
          <view
            class="dev-service-item"
            v-for="serv in dev.services"
            :key="serv.serviceId"
          >
            <view class="service-uuid">{{ serv.serviceId }}</view>
            <view class="service-characteristics">
              <view
                class="char-item"
                v-for="char in serv.characteristics"
                :key="char.uuid"
                @click="selChar(serv, char)"
              >
                <nut-row>
                  <nut-col :span="20">
                    <view class="char-uuid">{{ char.uuid }}</view>
                  </nut-col>
                  <nut-col :span="1"> </nut-col>
                  <nut-col :span="1">
                    <view class="char-prop">{{
                      char.properties.notify ? "N" : ""
                    }}</view>
                  </nut-col>
                  <nut-col :span="1">
                    <view class="char-prop">{{
                      char.properties.read ? "R" : ""
                    }}</view>
                  </nut-col>
                  <nut-col :span="1">
                    <view class="char-prop">{{
                      char.properties.write ? "W" : ""
                    }}</view>
                  </nut-col>
                  <nut-col :span="1" class="char-modify">
                    <nut-icon
                      name="arrow-right"
                      size="12"
                      color="#999"
                    ></nut-icon>
                  </nut-col>
                </nut-row>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Taro from "@tarojs/taro";
import { set, get } from "@/utils/storage";
import { BTManager, ConnectStatus } from "@/components/wx-ant-ble/index";

export default {
  name: "Index",
  components: {},
  data() {
    return {
      dev: {},
      connectStatus: -1,
      activeName: [1, 2],
      // btManager
      bt: null,
    };
  },
  computed: {
    connectStatusText() {
      if (this.connectStatus == 0) {
        return "未连接";
      }
      if (this.connectStatus == 1) {
        return "正在连接..";
      }
      if (this.connectStatus == 2) {
        return "已连接";
      }
      return "状态未知";
    },
  },
  methods: {
    initBluetooth() {
      // 初始化蓝牙管理器
      this.bt = new BTManager({
        debug: true,
      });

      this.connectStatus = this.bt.connectStatus;
      // 注册状态回调
      let self = this;
      this.bt.registerDidUpdateConnectStatus((res) => {
        console.log("detail registerDidUpdateConnectStatus", res);
        self.connectStatus = res.connectStatus;
        if (res.connectStatus === ConnectStatus.disconnected) {
          Taro.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    selChar(serv, char) {
      let notifyUUIDs = this.getNotifyUUIDs();
      let editConf = {
        servId: serv.serviceId,
        charId: char.uuid,
        props: char.properties,
        notifyUUIDs,
      };
      set("curr_bleedit", editConf);
      Taro.navigateTo({
        url: "/pages/btEditor/index",
      });
    },
    getNotifyUUIDs() {
      let uuids = [];
      for (let serv of this.dev.services) {
        for (let char of serv.characteristics) {
          if (char.properties.notify) {
            uuids.push({
              servId: serv.serviceId,
              charId: char.uuid,
              isListening: false,
            });
          }
        }
      }
      return uuids;
    },
  },
  mounted() {
    let device = get("curr_bledev") || null;
    if (device) {
      console.log("connect-dev: \n", JSON.stringify(device, null, 2));
      this.dev = device;
    } else {
      Taro.showToast({
        title: "未找到设备信息",
        duration: 3000,
        complete: function() {
          Taro.navigateBack({});
        },
      });
    }
  },
  onReady() {},
  onShow() {
    this.initBluetooth();
  },
  onHide() {
    console.log("onHide:", this.dev.deviceId);
  },
  unmounted() {
    console.log("unmounted：", this.dev.deviceId);
    this.bt.disconnect();
  },
  destroyed() {
    console.log("destroyed：", this.dev.deviceId);
  },
  beforedestroy() {
    console.log("disconnect-dev：", this.dev.deviceId);
  },
};
</script>

<style lang="scss">
.dev-info {
  padding: 20px 10px;

  .dev-name {
    font-size: 16px;
  }
  .dev-id {
    font-size: 12px;
    color: #aaa;
  }
  .dev-signal {
    font-size: 12px;
    color: #080;
  }
  .dev-connect {
    font-size: 14px;
    color: #1d2088;
    text-align: right;
  }

  background: #efefef;
}

.dev-data {
  padding: 10px 10px;

  .dev-data-title {
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #e7e7e7;
    padding: 10px 0;
  }
  .dev-data-content {
    padding: 15px 0;
    color: #1d2088;
    font-size: 14px;
  }

  .dev-data-services {
    padding: 20px 0;
    font-size: 14px;
  }

  .dev-service-item {
    .service-uuid {
      color: #1d2088;
    }

    .service-characteristics {
      padding: 10px 0;
    }

    .char-item {
      padding: 5px;
      background: #e7e7e7;
      border: 1px #e3e3e3 solid;
      margin: 10px 0;
    }

    .char-uuid {
      color: #999;
      font-size: 12px;
    }
    .char-prop {
      color: #080;
      font-size: 12px;
      font-weight: bold;
    }

    .char-modify {
      float: right;
    }
  }
}
</style>
